<template>
	<Container>
		<view class="header">
			<view class="article" v-if="!isStart && articleIsShow"><image class="img" :src="assignment.optionArticles[current].imageUrl" mode="aspectFit"></image></view>
			<view class="article" v-if="isStart">
				<view v-for="(item, index) in assignment.optionArticleNames" :key="index" @tap="tap(item, index)" hover-class="touch" hover-stay-time="300">
					<image class="image img" :class="{ articleLight: chooses[index] === 'select' }" :src="article(item).imageUrl" mode="aspectFit"></image>
				</view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="guide" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	data() {
		return {
			current: 0,
			isStart: false,
			articleIsShow: true,
			timer: null
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	computed: {
		guide() {
			const question = this.isStart ? 'questionName2' : 'questionName1'
			return this.assignment.optionArticles[this.current][question]
		},
		article(item) {
			return function(item) {
				return this.assignment.optionArticles.filter(articles => {
					return articles.name === item
				})[0]
			}
		}
	},
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	methods: {
		tap: function(item, index) {
			if (this.questionPress) return
			if (this.isComplete) return
			this.isComplete = true
			this.touchAudio()
			const isSure = this.article(item).name === this.assignment.optionArticles[this.current].name
			this.choosesKey.push(isSure)
			this.optionStatus('select', index)
			const timer = setTimeout(() => {
				if (this.current === this.assignment.optionArticles.length - 1) {
					const bool = this.choosesKey.every(item => {
						return item
					})
					this.$parent.next({
						isSure: bool,
						audioUrl: this.audioUrl
					})
					return
				}
				this.optionStatus('', index)
				this.current++
				this.questionPlay()
			}, 1500)
			this.$once('hook:beforeDestory', function() {
				clearTimeout(timer)
			})
		},
		
		questionPlay: async function() {
			clearTimeout(this.timer)
			const data = await this.parseTextAudio({
				text: this.guide,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = true
				},
				end: () => {
					this.questionPress = false
					this.isComplete = false
					if (this.isStart) return
					this.timer = setTimeout(() => {
						if (this.current === this.assignment.optionArticles.length - 1) {
							this.articleIsShow = false
							this.current = 0
							this.isStart = true
							this.questionPlay()
							return
						}
						this.current++
						this.articleIsShow = false
						setTimeout(() => {
							this.articleIsShow = true
						}, 0)
						this.questionPlay()
					}, 2500)
				}
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	position relative
	.article
		width 100%
		height 100%
		display flex
		align-items center
		justify-content center
		flex-wrap wrap
		animation outIn 0.4s
		image
			width 75%
			height 75%
		view
			width 50%
			height 33%
			display flex
			align-items center
			justify-content center
			transition all 0.3s
			position relative
			.image
				width 75%
				height 75%
</style>
